/*!
* EURO INFORMATICA
* http://informatica.euroeducation.ro/
* Copyright 2013, Euro Education
* Author: Marius Ionescu
*
* --- GAMING IN HTML ---
*/

$(document).ready(function () {
    var proObj = new WebSiteClass();
});

var WebSiteClass = BaseClass.extend({
    siteThis: null,
    Controls: {
		dx: null, 		
	    rate: null, 	
	    ani: null, 			
	    c: null,  				
	    w: null, 				
	    grassHeight: null,  
	    carAlpha: null, 
	    carX: null,	
	    carY: null, 		
	    carWidth: null, 	
	    carHeight: null, 
	    tiresDelta: null, 
	    axisDelta: null,	
	    radius: null,
		car: null,
		btnSlower: null,	
		btnPlay: null,	
		btnFaster: null,
		canvasElement: null,
		translateX: null,
		translateY: null,
		rotate: null,
		scale: null,
		transform: null,
		move: null,
		btnToogle: null,
		startPos: null
	},

    init: function () {
        siteThis = this;
		siteThis.Controls.dx = 5;
		siteThis.Controls.rate = 1;
		siteThis.Controls.ani = null;
		siteThis.Controls.c = null;
		siteThis.Controls.w = null;
		siteThis.Controls.grassHeight = 130;
		siteThis.Controls.carAlpha = 0;
		siteThis.Controls.carX = -400;
		siteThis.Controls.carY = 300;
		siteThis.Controls.carWidth = 400;
		siteThis.Controls.carHeight = 130;
		siteThis.Controls.tiresDelta = 15;
		siteThis.Controls.axisDelta = 20;
		siteThis.Controls.radius = 60;
		siteThis.startPos = 1;
		siteThis.Controls.c = document.getElementById('canvas').getContext('2d');
		siteThis.Controls.canvasElement = document.getElementById('canvasElement').getContext('2d');
		siteThis.Controls.btnSlower = $('#btnSlower').unbind('click').bind('click', {delta: -0.1}, siteThis.speed);
		siteThis.Controls.btnPlay = $('#btnPlay').unbind('click').bind('click', siteThis.play);
		siteThis.Controls.btnFaster = $('#btnFaster').unbind('click').bind('click', {delta: +0.1}, siteThis.speed);
		siteThis.Controls.car = document.createElement('canvas'); 	
		siteThis.Controls.car.height = siteThis.Controls.carHeight + siteThis.Controls.axisDelta + siteThis.Controls.radius; 
		siteThis.Controls.car.width = siteThis.Controls.carWidth;
		siteThis.Controls.w = siteThis.Controls.car.getContext('2d'); 
		$(document).unbind('keydown').bind('keydown', siteThis.keyEvents);
		siteThis.drawCanvas();
		siteThis.playDemo(this);
		siteThis.play(this);
		siteThis.Controls.translateX = $('#translateX').unbind('click').bind('click', {data: 'translateX'}, siteThis.applyGeometry);
		siteThis.Controls.translateY = $('#translateY').unbind('click').bind('click', {data: 'translateY'}, siteThis.applyGeometry);
		siteThis.Controls.rotate = $('#rotate').unbind('click').bind('click', {data: 'rotate'}, siteThis.applyGeometry);
		siteThis.Controls.scale = $('#scale').unbind('click').bind('click', {data: 'scale'}, siteThis.applyGeometry);
		siteThis.Controls.move = $('#move').unbind('click').bind('click', {data: 'move'}, siteThis.applyGeometry);
		siteThis.Controls.transform = $('#transform').unbind('click').bind('click', {data: 'transform'}, siteThis.applyGeometry);
		siteThis.Controls.btnToogle = $('#btnToogle').unbind('click').bind('click', siteThis.toogleDIV);
		siteThis.drawCanvasTest();
    },
	
	playDemo: function (e) {
		var c=document.getElementById("canvasElement");
		var ctx=c.getContext("2d");
		ctx.clearRect(0, 0, siteThis.Controls.c.canvas.width, siteThis.Controls.c.canvas.height);
		ctx.translate(10,0);
		ctx.fillRect(40,40,50,30);
		siteThis.startPos += 1;
		// if(siteThis.startPos == 10)
		// {
			// console.log(siteThis.startPos);
			// siteThis.startPos = 1;
			// ctx.clearRect(0, 0, siteThis.Controls.c.canvas.width, siteThis.Controls.c.canvas.height);
			// ctx.translate(10,0);
			// ctx.fillRect(-40,-40,50,30);
		// }
	},
	
	play: function (s) {
		if (siteThis.Controls.ani) {								
			clearInterval(siteThis.Controls.ani); 				
			siteThis.Controls.ani = null; 						
			s.target.innerHTML = 'Play'; 		
		} else {
			siteThis.Controls.ani = setInterval(siteThis.drawCanvas, 40); 
			//siteThis.Controls.ani = setInterval(siteThis.playDemo, 100); 
			if(s.target != undefined)
				s.target.innerHTML = 'Pause';		
		}
	},
	
	applyGeometry: function (e) {
		switch(e.data.data){
			case 'translateX':
				var c=document.getElementById("canvasElement");
				var ctx=c.getContext("2d");
				ctx.clearRect(0, 0, siteThis.Controls.c.canvas.width, siteThis.Controls.c.canvas.height);
				ctx.save(); 
				ctx.translate(10,0);
				ctx.fillRect(40,40,50,30);
			break;
			case 'translateY':
				var c=document.getElementById("canvasElement");
				var ctx=c.getContext("2d");
				ctx.clearRect(0, 0, siteThis.Controls.c.canvas.width, siteThis.Controls.c.canvas.height);
				ctx.save(); 
				ctx.translate(0,10);
				ctx.fillRect(40,40,50,30);
			break;
			case 'rotate':
				var c=document.getElementById("canvasElement");
				var ctx=c.getContext("2d");
				ctx.clearRect(0, 0, siteThis.Controls.c.canvas.width, siteThis.Controls.c.canvas.height);
				ctx.save(); 
				ctx.rotate(2*Math.PI/180);
				ctx.fillRect(40,40,50,30);
			break;
			case 'scale':
				var c=document.getElementById("canvasElement");
				var ctx=c.getContext("2d");
				ctx.clearRect(0, 0, siteThis.Controls.c.canvas.width, siteThis.Controls.c.canvas.height);
				ctx.save(); 
				ctx.scale(2,1);
				ctx.fillRect(40,40,50,30);
			break;
			case 'transform':
				// var c=document.getElementById("canvasElement");
				// var ctx=c.getContext("2d");
				// ctx.fillStyle="red";
				// ctx.fillRect(0,0,50,20)
				// ctx.transform(1,0.5,-0.5,1,30,10);
			break;
			case 'move':siteThis.Controls.ani = setInterval(siteThis.playDemo, 300); 
				//siteThis.drawCanvasTest();
			break;
			default:
				break;
		}
	},
	
	drawCanvasTest: function () {
		var c=document.getElementById("canvasElement");
		var ctx=c.getContext("2d");
		//ctx.clearRect(0, 0, c.canvas.width, c.canvas.height);
		ctx.fillStyle="#FF0000";
		ctx.fillRect(40,40,50,30);
	},

	drawCanvas: function () {
		siteThis.Controls.c.clearRect(0, 0, siteThis.Controls.c.canvas.width, siteThis.Controls.c.canvas.height);
		siteThis.Controls.c.save(); 										
		siteThis.drawGrass(); 									  
		siteThis.drawSky(); 
		siteThis.drawBuilding();
		//siteThis.drawLogo(); 									  
		siteThis.Controls.c.translate(siteThis.Controls.carX, 0); 							
		siteThis.drawCar(); 										
		siteThis.Controls.c.drawImage(siteThis.Controls.w.canvas, 0, siteThis.Controls.carY); 				
		siteThis.Controls.c.restore(); 								
		siteThis.Controls.carX += siteThis.Controls.dx; 							
		siteThis.Controls.carAlpha += siteThis.Controls.dx / siteThis.Controls.radius; 					
		if (siteThis.Controls.carX > siteThis.Controls.c.canvas.width)					
			siteThis.Controls.carX = -siteThis.Controls.carWidth - 10; 				
	},
	
	drawBuilding: function () {
		siteThis.Controls.c.fillStyle="#B8B8B8";
		siteThis.Controls.c.fillRect(10, 200,200,220);
		
		siteThis.Controls.c.fillStyle="#FFFFFF";
		siteThis.Controls.c.fillRect(50, 220,30,40);
		siteThis.Controls.c.fillStyle="#FFFFFF";
		siteThis.Controls.c.fillRect(90, 220,30,40);
		siteThis.Controls.c.fillStyle="#FFFFFF";
		siteThis.Controls.c.fillRect(130, 220,30,40);
		
		siteThis.Controls.c.fillStyle="#FFFFFF";
		siteThis.Controls.c.fillRect(50, 280,30,40);
		siteThis.Controls.c.fillStyle="#FFFFFF";
		siteThis.Controls.c.fillRect(90, 280,30,40);
		siteThis.Controls.c.fillStyle="#FFFFFF";
		siteThis.Controls.c.fillRect(130, 280,30,40);
		
		siteThis.Controls.c.fillStyle="#FFFFFF";
		siteThis.Controls.c.fillRect(50, 340,30,40);
		siteThis.Controls.c.fillStyle="#FFFFFF";
		siteThis.Controls.c.fillRect(90, 340,30,40);
		siteThis.Controls.c.fillStyle="#FFFFFF";
		siteThis.Controls.c.fillRect(130, 340,30,40);
	},

	drawGrass: function() {
		var grad = siteThis.Controls.c.createLinearGradient(0, siteThis.Controls.c.canvas.height - siteThis.Controls.grassHeight, 0, siteThis.Controls.c.canvas.height);
		grad.addColorStop(0, '#33CC00');
		grad.addColorStop(1, '#66FF22');
		siteThis.Controls.c.fillStyle = grad;
		siteThis.Controls.c.lineWidth = 0;
		siteThis.Controls.c.fillRect(0, siteThis.Controls.c.canvas.height - siteThis.Controls.grassHeight, siteThis.Controls.c.canvas.width, siteThis.Controls.grassHeight);
	},

	drawLogo: function() {
		var img = new Image();
		img.src = "../Images/Portal/logo.png";
		siteThis.Controls.c.drawImage(img, 0, 0);
		//siteThis.Controls.c.fillRect(0, siteThis.Controls.c.canvas.height - siteThis.Controls.grassHeight - 300, siteThis.Controls.c.canvas.width, siteThis.Controls.grassHeight + 50);
	},

	drawSky: function() {
		var grad = siteThis.Controls.c.createLinearGradient(0, siteThis.Controls.c.canvas.height - siteThis.Controls.grassHeight, 0, siteThis.Controls.c.canvas.height);
		//var img = new Image();
		//img.src = "../Images/Portal/sky.png";
		//siteThis.Controls.c.drawImage(img, 0, 130);
		grad.addColorStop(0, '#82CAFF');
		grad.addColorStop(1, '#79BAEC');
		siteThis.Controls.c.fillStyle = grad;
		siteThis.Controls.c.lineWidth = 0;
		//siteThis.Controls.c.font = "EURO INFORMATICA";
		siteThis.Controls.c.fillRect(0, siteThis.Controls.c.canvas.height - siteThis.Controls.grassHeight - 420, siteThis.Controls.c.canvas.width, siteThis.Controls.grassHeight +45);
		siteThis.Controls.c.fillStyle="#FFFFFF";
		siteThis.Controls.c.fillText("EURO INFORMATICA", 5, 20); 
		siteThis.drawClouds();
	},
	
	drawClouds: function() {
		var canvas = document.getElementById('canvas');
		var context = canvas.getContext('2d');
		context.beginPath();
		context.moveTo(170, 80);
		context.bezierCurveTo(130, 100, 130, 150, 230, 150);
		context.bezierCurveTo(250, 180, 320, 180, 340, 150);
		context.bezierCurveTo(420, 150, 420, 120, 390, 100);
		context.bezierCurveTo(430, 40, 370, 30, 340, 50);
		context.bezierCurveTo(320, 5, 250, 20, 250, 50);
		context.bezierCurveTo(200, 5, 150, 20, 170, 80);
		context.closePath();
		context.lineWidth = 5;
		context.fillStyle = '#FFF';
		context.fill();
		context.strokeStyle = '#8ED6FF';
		context.stroke();
	},

	drawCar: function() {
		siteThis.Controls.w.clearRect(0, 0, siteThis.Controls.w.canvas.width, siteThis.Controls.w.canvas.height); 			
		siteThis.Controls.w.strokeStyle = '#FF6600'; 		
		siteThis.Controls.w.lineWidth = 2; 				
		siteThis.Controls.w.fillStyle = '#E41B17'; 		
		siteThis.Controls.w.beginPath(); 					
		siteThis.Controls.w.rect(0, 0, siteThis.Controls.carWidth, siteThis.Controls.carHeight); 	
		siteThis.Controls.w.stroke(); 					
		siteThis.Controls.w.fill(); 				
		siteThis.Controls.w.closePath(); 				
		siteThis.drawTire(siteThis.Controls.tiresDelta + siteThis.Controls.radius, siteThis.Controls.carHeight + siteThis.Controls.axisDelta); 	
		siteThis.drawTire(siteThis.Controls.carWidth - siteThis.Controls.tiresDelta - siteThis.Controls.radius, siteThis.Controls.carHeight + siteThis.Controls.axisDelta); 
	},

	drawTire: function(x, y) {
		siteThis.Controls.w.save(); 								
		siteThis.Controls.w.translate(x, y); 						
		siteThis.Controls.w.rotate(siteThis.Controls.carAlpha); 						
		siteThis.Controls.w.strokeStyle = '#3300FF'; 					
		siteThis.Controls.w.lineWidth = 1; 					
		siteThis.Controls.w.fillStyle = '#0099FF'; 				
		siteThis.Controls.w.beginPath(); 							
		siteThis.Controls.w.arc(0, 0, siteThis.Controls.radius, 0, 2 * Math.PI, false); 
		siteThis.Controls.w.fill(); 					
		siteThis.Controls.w.closePath(); 						
		siteThis.Controls.w.beginPath(); 						
		siteThis.Controls.w.moveTo(siteThis.Controls.radius, 0); 			
		siteThis.Controls.w.lineTo(-siteThis.Controls.radius, 0); 					
		siteThis.Controls.w.stroke();
		siteThis.Controls.w.closePath(); 					
		siteThis.Controls.w.beginPath(); 					
		siteThis.Controls.w.moveTo(0, siteThis.Controls.radius); 			
		siteThis.Controls.w.lineTo(0, -siteThis.Controls.radius); 			
		siteThis.Controls.w.stroke(); 								
		siteThis.Controls.w.closePath(); 						
		siteThis.Controls.w.restore(); 						
	},

	speed: function(e) {
		var delta;
		if(e.data == undefined)
			delta = e;
		else
			delta = e.data.delta;
		var newRate = Math.max(siteThis.Controls.rate + delta, 0.1);
		siteThis.Controls.dx = newRate / siteThis.Controls.rate * siteThis.Controls.dx;
		siteThis.Controls.rate = newRate;
	},
	
	keyEvents: function(e){
		switch(e.which){
			case 37://left
				break;
			case 38: siteThis.speed(+0.1);//up
				break;
			case 39://right
				break;
			case 40: siteThis.speed(-0.1);//down
				break;
			default:
				break;
		}
		//e.preventDefault();
	},
	
	setPageGeometry: function () {
        try {
            var browserDim = siteThis.getBrowserDimensions();
            var w = browserDim.Width;
            var h = browserDim.Height;
        }
        catch (err) {
            
        }
    },
	
	getBrowserDimensions: function () {
		var size = new Object();
		if (typeof window.innerWidth != 'undefined') {
			size.Width = window.innerWidth;
			size.Height = window.innerHeight
		}
		else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) {
			size.Width = document.documentElement.clientWidth;
			size.Height = document.documentElement.clientHeight;
		}
		else {
			size.Width = document.getElementsByTagName('body')[0].clientWidth;
			size.Height = document.getElementsByTagName('body')[0].clientHeight;
		}
		return size;
	}
}, 'WebSiteClass');